<template>
<div class="login">
  <div class="bg">
    <img src="@/assets/bg.jpg">
  </div>
  <div class="login-from">
    <img data-v-6af20a44="" src="https://www-file.huawei.com/-/media/corporate/images/home/logo/huawei_logo.png" width="200" style="margin: 50px 0">
    <el-tabs v-model="activeName" @tab-click="fromHandleClick">
      <el-tab-pane label="登陆" name="login">
        <el-form :model="login" :rules="loginRules" ref="login" class="demo-ruleForm">
          <el-form-item prop="username">
            <el-input v-model="login.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="login.password" placeholder="请输入密码" type="password" @keyup.enter="submitForm('login')"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="btn">
              <div>
                <el-button type="primary" @click="submitForm('login')">登陆</el-button>
                <el-button  @click="activeName = 'register'" link>未注册</el-button>
              </div>
              <el-button link>忘记密码</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="注册" name="register">
        <el-form :model="register" :rules="registerRules" ref="register" class="demo-ruleForm">
          <el-form-item prop="username">
            <el-input v-model="register.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input v-model="register.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="register.password" placeholder="请输入密码"></el-input>
          </el-form-item>

          <el-form-item>
            <div class="btn">
              <div>
                <el-button type="success" @click="submitForm('register')">注册</el-button>
                <el-button link @click="activeName = 'login'">已有账号</el-button>
              </div>
              <el-button link>忘记密码</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</div>
</template>

<script>
import { login, register } from '@/api/user'
import { mapMutations } from 'vuex'

export default {
  data () {
    return {
      activeName: 'login',
      login: {
        username: '',
        password: ''
      },
      register: {
        username: '',
        password: '',
        email: ''
      },
      loginRules: {
        username: [
          {
            required: true,
            message: '输入用户名有误',
            trigger: 'blur'
          }
        ],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }]

      },
      registerRules: {
        username: [
          {
            required: true,
            message: '输入用户名有误',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 12,
            message: '用户用户名长度6-12'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 12,
            message: '密码长度6-15'
          }
        ],
        email: [{
          required: true,
          message: '请输入邮箱',
          trigger: 'blur'
        }]

      }
    }
  },
  methods: {
    ...mapMutations(['changeToken']),
    submitForm (formName) {
      if (formName === 'login') {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            try {
              const { data } = await login(this.login)
              // 提示框
              data.success ? this.$message({ type: 'success', message: data.message }) : this.$message({ type: 'error', message: data.message })
              // vuex设置token
              this.changeToken(data.data.token)
              this.$router.push({ name: 'System' })
            } catch (error) {
              console.log(error)
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else {
        // 注册逻辑
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            try {
              const { data } = await register(this.register)
              // 提示框
              data.success ? this.$message({ type: 'success', message: data.message }) : this.$message({ type: 'error', message: data.message })
              if (data.success) {
                this.activeName = 'login'
              }
            } catch (error) {
              console.log(error)
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    fromHandleClick () {
      this.login.username = null
      this.login.password = null
      this.login.email = null
      this.register.username = null
      this.register.password = null
      this.register.email = null
    }
  }
}
</script>

<style>
.login {
  display: flex;
  height: 100vh;
}

.bg img {
  width: 360px;
  height: 100%;
  vertical-align: middle;
}

.login-from {
  flex: 1;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.el-form {
  width: 540px;
}

.el-input__wrapper {
  height: 45px;
}

.btn {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.btn a{
  color: #3f9eff;
}

</style>
